<!-- 首页 -->
<script>
import FishWork from '@/components/layout/FishWork.vue'
import SubtitledSectionShort from'@/components/layout/SubtitledSectionShort.vue'
import SubtitledSection from '@/components/layout/SubtitledSection.vue'
import SubtitledSectionLong from '@/components/layout/SubtitledSectionLong.vue'
import CompanyIntroduction from '@/components/layout/CompanyIntroduction.vue'
import CompanyList from '@/components/layout/CompanyList.vue'
import Head2 from '@/components/layout/Head2.vue'
import BaseSize from '@/components/charts/BaseSize/BaseSize.vue'
import WaterQualityModule from '@/components/layout/WaterQualityModule.vue'
import { homelist, caicon, GetProductionRecords, Getbasic_data_fish_pond,select_equipmentv2,getcamera,getweather, searchRFID, searchCompanyShip, searchRFIDByCatchShipID } from '@/request/api';
import axios from 'axios';
import EZUIKit from 'ezuikit-js';
import SubtitledSectionShortVue from '../components/layout/SubtitledSectionShort.vue'
import * as echarts from 'echarts'
import DeviceList from '@/components/layout/DeviceList.vue'
import FishingTypes from '@/components/charts/FishingTypes/FishingTypes.vue'
import FishingGrounds from '@/components/charts/FishingGrounds/FishingGrounds.vue'
//import ShipList from '@/components/layout/ShipList.vue'
//import CatchVolume from '@/components/charts/CatchVolume/CatchVolume.vue'
import FishingTrend from '@/components/charts/FishingTrend/FishingTrend.vue'

// RFID查询功能现在通过API调用后端，不再使用静态数据

export default {
  components: {
    //SubtitledSection, //短标题框
    // SubtitledSectionLong,//长标题框
    //CompanyIntroduction, // 企业介绍
    //CompanyList, //公司列表
    Head2,
    // WaterQualityModule,//水质模块
    //SubtitledSectionShort,
    //FishWork,
    //FishingTypes,
    //ShipList,
    FishingGrounds,
    //CatchVolume,
    FishingTrend
  },
  data() {
    return {
      // videoSrc1: '',
      // videoSrc2: '',
      videoSrc: require('@/assets/1.mp4'),
      //videoSrc2: 'http://47.103.199.200:9000/static/video/2.mp4',
      videoSrc2: require('@/assets/2.mp4'),
      videoAddresses: [],
      SerialNumber: [],
      video_address: [],
      cameralist: [],
      base_id: "",
      shelist: [],
      jktokens: {
        value: ''
      },
      shebeilist: {
        "water": [],
        "meteorological": [],
        "monitoring": [],
      },
      box: 0,
      intervalId: null,
      baselist: [
        {
          "ID": 1,
          "BASE_NAME": "舟山宁泰远洋渔业 ",
          "BASE_LOCATION": "122.26872878631298,29.91229592422923",
          "INTRODUCE": "舟山宁泰远洋渔业有限公司成立于2009年8月，于2010年5月10日取得农业部颁发的远洋渔业资格证书，是一家独资的民营远洋渔业企业。公司秉承“规范发展、共创共赢”的宗旨，致力于开发“绿色海洋，绿色产品”。",
          "abbreviation": "shou"
        },
        {
          "ID": 2,
          "BASE_NAME": "上海开创远洋渔业",
          "BASE_LOCATION": "121.43092000000001,31.034222000000007",
          "INTRODUCE": "上海开创远洋渔业有限公司作为开创国际旗下唯一子公司，主要从事远洋渔业捕捞、水产品加工销售及相关贸易。公司拥有12艘大型金枪鱼围网船舶和2艘大型拖网加工船舶",
          "abbreviation": ""
        },
        {
          "ID": 3,
          "BASE_NAME": "舟山新吉利远洋渔业",
          "BASE_LOCATION": "122.25406399999997,29.985359000000013",
          "INTRODUCE": "舟山新吉利远洋渔业有限公司成立于2001年9月，是浙江省第一家取得农业部颁发的远洋渔业资格证书的民营企业，具有自主经营的进出口经营权",
          "abbreviation": "yuan"
        },
        {
          "ID": 4,
          "BASE_NAME": "浙江丰汇远洋渔业",
          "BASE_LOCATION": "121.53272599999991,29.51050100000002",
          "INTRODUCE": "浙江丰汇远洋渔业有限公司是经工商局批准成立的专门从事海洋渔业开发和利用的企业，以海产品捕捞、加工与销售为核心业务，并从事相关产品的贸易",
          "abbreviation": ""
        }
      ],
      fishworklist: [
        {
          "ID": 1,
          "BASE_NAME": "印度洋公海渔场",
          //"BASE_LOCATION": "122.26872878631298,29.91229592422923",
          "BASE_LOCATION": "75,10",
          //"INTRODUCE": "舟山宁泰远洋渔业有限公司成立于2009年8月，于2010年5月10日取得农业部颁发的远洋渔业资格证书，是一家独资的民营远洋渔业企业。公司秉承“规范发展、共创共赢”的宗旨，致力于开发“绿色海洋，绿色产品”。",
          "abbreviation": "shou"
        },
        {
          "ID": 2,
          "BASE_NAME": "北太平洋公海渔场",
          //"BASE_LOCATION": "121.43092000000001,31.034222000000007",
          "BASE_LOCATION": "160,40",
          //"INTRODUCE": "上海开创远洋渔业有限公司作为开创国际旗下唯一子公司，主要从事远洋渔业捕捞、水产品加工销售及相关贸易。公司拥有12艘大型金枪鱼围网船舶和2艘大型拖网加工船舶",
          "abbreviation": ""
        },
        {
          "ID": 3,
          "BASE_NAME": "东南太平洋公海渔场",
          //"BASE_LOCATION": "122.25406399999997,29.985359000000013",
          "BASE_LOCATION": "-95,-20",
          //"INTRODUCE": "舟山新吉利远洋渔业有限公司成立于2001年9月，是浙江省第一家取得农业部颁发的远洋渔业资格证书的民营企业，具有自主经营的进出口经营权",
          "abbreviation": "yuan"
        },
        {
          "ID": 4,
          "BASE_NAME": "西南大西洋公海渔场",
          //"BASE_LOCATION": "121.53272599999991,29.51050100000002",
          "BASE_LOCATION": "-45,-55",
          //"INTRODUCE": "浙江丰汇远洋渔业有限公司是经工商局批准成立的专门从事海洋渔业开发和利用的企业，以海产品捕捞、加工与销售为核心业务，并从事相关产品的贸易",
          "abbreviation": ""
        }
      ],
      // wetherinfo: {
      //   'wendu': {
      //     img: 'top-info-wd.png',
      //     value: '0'
      //   },
      //   'shidu': {
      //     img: 'top-info-xy.png',
      //     value: '0'
      //   },
      //   'fengxiang': {
      //     img: 'top-info-ql.png',
      //     value: '0'
      //   },
      //   'fengsu': {
      //     img: 'top-info-fs.png',
      //     value: '0'
      //   },
      //   'guangzhao': {
      //     img: 'top-info-yg.png',
      //     value: '0'
      //   },
      //   'jiangyuliang': {
      //     img: 'top-info-sd.png',
      //     value: '0'
      //   },
      //   'qiya': {
      //     img: 'top-info-qy.png',
      //     value: '0'
      //   }
      // },
      wetherinfo1: {
        'temperature': {
          img: 'top-info-wd.png',
          value: '0'
        },
        'humidity': {
          img: 'top-info-xy.png',
          value: '0'
        },
        'wind_direction': {
          img: 'top-info-ql.png',
          value: '0'
        },
        'wind_power': {
          img: 'top-info-fs.png',
          value: '0'
        }, 
        'guangzhao': {
          img: 'top-info-yg.png',
          value: '-'
        },
        'precipitation': {
          img: 'top-info-sd.png',
          value: '-'
        },
        'pressure': {
          img: 'top-info-qy.png',
          value: '-'
        } ,
      },
      city: '上海',  // 直接设置城市为 "上海"
      livetianqi: null,  // 存储天气数据
      alertlist: {
        tem: 0,
        ph: 0,
        o2: 0
      },
      optionsData: [],
      volumeDetailData: [
        { name: "养殖规模(亩)", data: [0, 0, 0, 0, 0, 0] },
        { name: "预期产量(吨)", data: [0, 0, 0, 0, 0, 0] },
      ],
      // 弹窗与船舶数据
      showCompanyModal: false,
      // 渔场捕捞量统计
      showChartTypeDropdown: false,
      chartDropdownPos: { top: 0, left: 0 },
      showFishingGroundsModal: false,
      showFishingTrendModal: false,
      // 作业海域统计
      showFishingAreaDropdown: false,
      areaDropdownPos: { top: 0, left: 0 },
      selectedCompany: null,
      fishingShipsMock: [
        { id: 1, name: '宁泰远洋-01', tonnage: 4200, status: '作业中', location: "75,10", targetType: 'fishing_ground' }, // 会随机分配到渔场
        { id: 2, name: '宁泰远洋-02', tonnage: 4100, status: '作业中', location: "160,40", targetType: 'fishing_ground' },
        { id: 3, name: '远海捕捞-A3', tonnage: 3900, status: '作业中', location: "-95,-20", targetType: 'fishing_ground' },
        { id: 4, name: '大洋渔运-04', tonnage: 4500, status: '作业中', location: "-45,-55", targetType: 'fishing_ground' },
        { id: 5, name: '深海捕捞-05', tonnage: 3800, status: '作业中', location: "-95,-20", targetType: 'fishing_ground' }
      ],
      transportShipsMock: [
        { id: 11, name: '宁泰运输-01', tonnage: 5200, status: '航行中', location: null, targetType: 'mixed' }, // mixed表示可能在大陆港口或渔场
        { id: 12, name: '甬海运输-07', tonnage: 4800, status: '航行中', location: null, targetType: 'mixed' },
        { id: 13, name: '沪渔运-3号', tonnage: 5050, status: '航行中', location: null, targetType: 'mixed' },
        { id: 14, name: '舟山物流-10', tonnage: 4900, status: '航行中', location: null, targetType: 'mixed' },
        { id: 15, name: '东海运输-15', tonnage: 5100, status: '航行中', location: null, targetType: 'mixed' }
      ],
      mainlandPorts: [
        // 中国大陆主要港口
        { name: '上海港', location: '121.5,31.2' },
        { name: '宁波舟山港', location: '121.9,29.9' },
        { name: '青岛港', location: '120.3,36.1' },
        { name: '天津港', location: '117.7,38.9' }
      ],
      traceRecordsTable: [],
      traceModalTitle: '溯源记录',
      showTraceDialog: false,
      traceRecordMeta: null,
      traceDetailDialog: false,
      traceRecordDetail: '',
      traceTemperatureData: [],
      traceTemperatureChart: null,
      traceTransportTime: '',
      // 树状列表展开状态
      expandedCompanies: {}, // { companyId: true/false }
      expandedShipTypes: {}, // { companyId-shipType: true/false }
      // 列表收起/展开状态
      isListCollapsed: false, // 列表是否收起
      // 企业船只数据（从API获取）
      companyShipsList: [], // 按companyId和shipType分组后的数据结构
      // 选中的船和记录
      selectedShip: null,
      catchRecordsDialog: false,
      catchRecordsList: [],
      catchRecordsTitle: '捕捞记录',
      // 捕捞日历相关
      catchCalendarDialog: false,
      catchCalendarData: {}, // 按日期分组的捕捞记录 { '2025-03-09': [...], '2025-03-10': [...] }
      catchCalendarDate: null, // 当前选中的日期
      catchCalendarCurrentMonth: null, // 当前显示的月份
      catchCalendarSelectedDateRecords: [], // 选中日期的捕捞记录
      // 温度曲线弹窗
      temperatureChartDialog: false,
      selectedRecord: null,
      // 模拟捕捞记录数据（根据船名生成）
      mockCatchRecords: {
        '宁泰远洋-01': [
          { RFID: 'RFID001', grade: '大', ship_name: '宁泰远洋-01', location: '75°E, 10°N', catch_time: '2024-01-15 08:30:00', transport_ship: '宁泰运输-01', transport_time: '2024-01-16 10:00:00', arrive_time: '2024-01-18 14:20:00', port_name: '上海港', details: JSON.stringify([
            { time: '2024-01-15 08:30:00', temperature: -39.2 },
            { time: '2024-01-15 14:30:00', temperature: -39.1 },
            { time: '2024-01-15 20:30:00', temperature: -39.3 },
            { time: '2024-01-16 02:30:00', temperature: -39.0 },
            { time: '2024-01-16 08:30:00', temperature: -38.9 },
            { time: '2024-01-16 10:00:00', temperature: -38.8 },
            { time: '2024-01-16 14:30:00', temperature: -38.7 },
            { time: '2024-01-16 20:30:00', temperature: -38.6 },
            { time: '2024-01-17 02:30:00', temperature: -38.5 },
            { time: '2024-01-17 08:30:00', temperature: -38.4 }
          ]) }
        ],
        '宁泰远洋-02': [
          { RFID: 'RFID002', grade: '中', ship_name: '宁泰远洋-02', location: '160°E, 40°N', catch_time: '2024-01-14 09:15:00', transport_ship: '甬海运输-07', transport_time: '2024-01-15 11:30:00', arrive_time: '2024-01-17 16:45:00', port_name: '宁波舟山港', details: JSON.stringify([
            { time: '2024-01-14 09:15:00', temperature: -39.5 },
            { time: '2024-01-14 15:15:00', temperature: -39.4 },
            { time: '2024-01-14 21:15:00', temperature: -39.6 },
            { time: '2024-01-15 03:15:00', temperature: -39.3 },
            { time: '2024-01-15 09:15:00', temperature: -39.2 },
            { time: '2024-01-15 11:30:00', temperature: -39.1 },
            { time: '2024-01-15 15:15:00', temperature: -39.0 },
            { time: '2024-01-15 21:15:00', temperature: -38.9 },
            { time: '2024-01-16 03:15:00', temperature: -38.8 },
            { time: '2024-01-16 09:15:00', temperature: -38.7 }
          ]) }
        ]
      }
    }
  },
  mounted() {
    this.renderMap();
    // this.GetCamera();
    this.getlist();
    this.startPolling(); // 开始定时请求数据
    // this.getToken();
    this.GetWeather();
    // 添加全局点击事件监听器，用于关闭下拉框
    document.addEventListener('click', this.handleClickOutside);
    // 获取企业船只列表
    this.fetchCompanyShips();
  },
  methods: {
    // 获取企业船只列表
    fetchCompanyShips() {
      searchCompanyShip({}).then(res => {
        // 判断响应状态
        if (res && res.code === 200 && res.success && res.data && Array.isArray(res.data)) {
          // 按 companyId 分组
          const companyMap = {};
          
          res.data.forEach(item => {
            const { companyId, companyName, shipId, shipName, shipType } = item;
            
            // 如果该企业不存在，创建企业对象
            if (!companyMap[companyId]) {
              companyMap[companyId] = {
                companyId: companyId,
                companyName: companyName,
                ships: {} // 按 shipType 分组
              };
            }
            
            // 如果该船只类型不存在，创建类型数组
            if (!companyMap[companyId].ships[shipType]) {
              companyMap[companyId].ships[shipType] = [];
            }
            
            // 添加船只到对应类型
            companyMap[companyId].ships[shipType].push({
              shipId: shipId,
              shipName: shipName,
              shipType: shipType
            });
          });
          
          // 转换为数组格式
          this.companyShipsList = Object.values(companyMap).map(company => ({
            ...company,
            ships: Object.entries(company.ships).map(([shipType, ships]) => ({
              shipType: shipType,
              shipTypeName: shipType === '1' ? '捕捞船' : '运输船',
              ships: ships
            }))
          }));
          
          // 默认展开第一个企业
          if (this.companyShipsList.length > 0) {
            const firstCompanyId = this.companyShipsList[0].companyId;
            this.$set(this.expandedCompanies, firstCompanyId, true);
          }
        } else {
          console.error('获取企业船只列表失败:', res);
          // 如果API失败，使用默认的baselist
          if (this.baselist.length > 0) {
            const firstCompanyId = this.baselist[0].ID;
            this.$set(this.expandedCompanies, firstCompanyId, true);
          }
        }
      }).catch(error => {
        console.error('获取企业船只列表异常:', error);
        // 如果API异常，使用默认的baselist
        if (this.baselist.length > 0) {
          const firstCompanyId = this.baselist[0].ID;
          this.$set(this.expandedCompanies, firstCompanyId, true);
        }
      });
    },
    handleTraceSearch(keyword) {
      const term = keyword ? keyword.trim() : '';
      if (!term) {
        if (this.$message && this.$message.warning) {
          this.$message.warning('请输入RFID');
        }
        return;
      }

      // 调用后端API查询RFID
      searchRFID({ rfid: term }).then(res => {
        if (res && res.data && res.data.length > 0) {
          const record = res.data[0]; // 假设返回数组，取第一个
          this.traceRecordsTable = [record];
          this.traceRecordMeta = {
            record,
            shipName: record.ship_name || '未知船舶',
            ship: record,
            dayItem: record
          };
          this.traceModalTitle = `${record.ship_name || '溯源记录'} - RFID ${record.RFID || term}`;
          this.showTraceDialog = true;
        } else {
          if (this.$message && this.$message.warning) {
            this.$message.warning('未找到该RFID的溯源记录');
          }
        }
      }).catch(error => {
        console.error('RFID查询失败:', error);
        if (this.$message && this.$message.error) {
          this.$message.error('查询失败，请稍后再试');
        }
      });
    },
    onTraceDialogClose() {
      this.showTraceDialog = false;
      this.traceRecordsTable = [];
      this.traceRecordMeta = null;
      this.traceDetailDialog = false;
      this.traceRecordDetail = '';
      this.traceTemperatureData = [];
      this.traceTransportTime = '';
      this.disposeTraceChart();
    },
    openTraceRecordDetail(record) {
      this.traceRecordDetail = record && record.details ? record.details : '暂无详情';
      let parsed = [];
      if (record && record.details) {
        try {
          parsed = JSON.parse(record.details);
        } catch (e) {
          parsed = [];
        }
      }
      this.traceTemperatureData = Array.isArray(parsed) ? parsed : [];
      const transportTime = record && record.transport_time ? String(record.transport_time).trim() : '';
      this.traceTransportTime = transportTime;
      this.traceDetailDialog = true;
      if (this.traceTemperatureData.length > 0) {
        this.$nextTick(() => {
          this.initTraceTemperatureChart();
        });
      } else {
        this.traceTransportTime = '';
        this.disposeTraceChart();
      }
    },
    closeTraceDetailDialog() {
      this.traceDetailDialog = false;
      this.traceRecordDetail = '';
      this.traceTemperatureData = [];
      this.traceTransportTime = '';
      this.disposeTraceChart();
    },
    initTraceTemperatureChart() {
      if (!this.traceTemperatureData || this.traceTemperatureData.length === 0) {
        return;
      }
      const chartContainer = this.$refs.traceTemperatureChart;
      if (!chartContainer) {
        return;
      }
      const currentTransportTime = this.traceTransportTime;
      this.disposeTraceChart();
      this.traceTransportTime = currentTransportTime;
      this.traceTemperatureChart = echarts.init(chartContainer);
      const times = this.traceTemperatureData.map(item => item.time);
      const temperatures = this.traceTemperatureData.map(item => item.temperature);
      const parseTimestamp = (value) => {
        if (!value) return NaN;
        const normalized = String(value).replace(/-/g, '/').replace('T', ' ');
        const date = new Date(normalized);
        return date.getTime();
      };
      let transportMarkLine = null;
      let transportIndex = -1;
      if (this.traceTransportTime) {
        const normalizedTransport = this.traceTransportTime;
        const transportTimestamp = parseTimestamp(normalizedTransport);
        if (!Number.isNaN(transportTimestamp)) {
          transportIndex = times.indexOf(normalizedTransport);
          if (transportIndex === -1) {
            const insertIndex = times.findIndex(time => parseTimestamp(time) > transportTimestamp);
            const getNumber = (val) => {
              if (val === null || val === undefined || val === '') {
                return null;
              }
              const num = Number(val);
              return Number.isNaN(num) ? null : num;
            };
            const interpolateTemperature = (prevIdx, nextIdx) => {
              const prevVal = prevIdx >= 0 ? getNumber(temperatures[prevIdx]) : null;
              const nextVal = nextIdx < temperatures.length ? getNumber(temperatures[nextIdx]) : null;
              const prevTime = prevIdx >= 0 ? parseTimestamp(times[prevIdx]) : NaN;
              const nextTime = nextIdx < times.length ? parseTimestamp(times[nextIdx]) : NaN;
              if (prevVal !== null && nextVal !== null && !Number.isNaN(prevTime) && !Number.isNaN(nextTime) && nextTime !== prevTime) {
                const ratio = (transportTimestamp - prevTime) / (nextTime - prevTime);
                const interpolated = prevVal + (nextVal - prevVal) * Math.min(Math.max(ratio, 0), 1);
                return Number(interpolated.toFixed(2));
              }
              if (prevVal !== null) return prevVal;
              if (nextVal !== null) return nextVal;
              return getNumber(temperatures[temperatures.length - 1]);
            };
            let transportTemp;
            if (insertIndex === -1) {
              transportTemp = interpolateTemperature(temperatures.length - 1, temperatures.length - 1);
              times.push(normalizedTransport);
              temperatures.push(transportTemp);
              transportIndex = times.length - 1;
            } else {
              transportTemp = interpolateTemperature(insertIndex - 1, insertIndex);
              times.splice(insertIndex, 0, normalizedTransport);
              temperatures.splice(insertIndex, 0, transportTemp);
              transportIndex = insertIndex;
            }
          }
          if (transportIndex !== -1) {
            transportMarkLine = {
              symbol: 'none',
              data: [
                {
                  xAxis: normalizedTransport,
                  lineStyle: {
                    color: '#FFD04B',
                    type: 'dashed',
                    width: 1.5
                  },
                  label: {
                    formatter: '转运时间',
                    color: '#FFD04B',
                    fontWeight: 'bold'
                  }
                }
              ]
            };
          }
        }
      }
      const beforeAreaStyle = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(67, 200, 255, 0.3)' },
            { offset: 1, color: 'rgba(67, 200, 255, 0.05)' }
          ]
        }
      };
      const afterAreaStyle = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255, 129, 96, 0.35)' },
            { offset: 1, color: 'rgba(255, 129, 96, 0.08)' }
          ]
        }
      };
      const baseSeries = {
        name: '温度',
        type: 'line',
        smooth: true,
        data: temperatures,
        connectNulls: true,
        itemStyle: {
          color: '#43C8FF'
        },
        lineStyle: {
          color: '#43C8FF',
          width: 2
        },
        areaStyle: beforeAreaStyle,
        symbol: 'circle',
        symbolSize: 6
      };
      if (transportMarkLine) {
        baseSeries.markLine = transportMarkLine;
      }
      let series = [baseSeries];
      if (transportIndex !== -1) {
        const beforeData = temperatures.map((val, idx) => (idx <= transportIndex ? val : null));
        const afterData = temperatures.map((val, idx) => (idx >= transportIndex ? val : null));
        const beforeSeries = {
          name: '转运前',
          type: 'line',
          smooth: true,
          data: beforeData,
          connectNulls: true,
          itemStyle: {
            color: '#43C8FF'
          },
          lineStyle: {
            color: '#43C8FF',
            width: 2
          },
          areaStyle: beforeAreaStyle,
          symbol: 'circle',
          symbolSize: 6
        };
        if (transportMarkLine) {
          beforeSeries.markLine = transportMarkLine;
        }
        const afterSeries = {
          name: '转运后',
          type: 'line',
          smooth: true,
          data: afterData,
          connectNulls: true,
          itemStyle: {
            color: '#FF8160'
          },
          lineStyle: {
            color: '#FF8160',
            width: 2
          },
          areaStyle: afterAreaStyle,
          symbol: 'circle',
          symbolSize: 6
        };
        series = [beforeSeries, afterSeries];
      }
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter(params) {
            const axisValue = params && params[0] ? params[0].axisValue : '';
            const validParam = Array.isArray(params)
              ? params.find(item => item && item.value !== null && item.value !== undefined && item.value !== '')
              : null;
            const valueText = validParam ? `${validParam.value}°C` : '--';
            return `${axisValue}<br/>温度: ${valueText}`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: times,
          axisLabel: {
            color: '#C3E4FF',
            rotate: 45,
            formatter(value) {
              if (value && value.indexOf(' ') > -1) {
                const parts = value.split(' ');
                if (parts.length >= 2) {
                  const datePart = parts[0];
                  const timePart = parts[1];
                  const dateParts = datePart.split('-');
                  if (dateParts.length >= 3) {
                    return `${dateParts[1]}-${dateParts[2]} ${timePart.substring(0, 5)}`;
                  }
                }
              }
              return value;
            }
          },
          axisLine: {
            lineStyle: {
              color: '#5596DF'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '温度(°C)',
          nameTextStyle: {
            color: '#C3E4FF'
          },
          axisLabel: {
            color: '#C3E4FF',
            formatter: '{value}°C'
          },
          axisLine: {
            lineStyle: {
              color: '#5596DF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(85, 150, 223, 0.2)',
              type: 'dashed'
            }
          }
        },
        series
      };
      this.traceTemperatureChart.setOption(option);
      window.addEventListener('resize', this.handleTraceChartResize);
    },
    handleTraceChartResize() {
      if (this.traceTemperatureChart) {
        this.traceTemperatureChart.resize();
      }
    },
    disposeTraceChart() {
      if (this.traceTemperatureChart) {
        window.removeEventListener('resize', this.handleTraceChartResize);
        this.traceTemperatureChart.dispose();
        this.traceTemperatureChart = null;
      }
      this.traceTransportTime = '';
    },
    // 初始化温度曲线图表（用于温度曲线弹窗）
    initTemperatureChart() {
      if (!this.traceTemperatureData || this.traceTemperatureData.length === 0) {
        return;
      }
      const chartContainer = this.$refs.temperatureChart;
      if (!chartContainer) {
        return;
      }
      const currentTransportTime = this.traceTransportTime;
      this.disposeTemperatureChart();
      this.traceTransportTime = currentTransportTime;
      this.traceTemperatureChart = echarts.init(chartContainer);
      
      // 使用与 Detail2.vue 相同的逻辑
      const times = this.traceTemperatureData.map(item => item.time);
      const temperatures = this.traceTemperatureData.map(item => item.temperature);
      const parseTimestamp = (value) => {
        if (!value) return NaN;
        const normalized = String(value).replace(/-/g, '/').replace('T', ' ');
        const date = new Date(normalized);
        return date.getTime();
      };
      let transportMarkLine = null;
      let transportIndex = -1;
      if (this.traceTransportTime) {
        const normalizedTransport = this.traceTransportTime;
        const transportTimestamp = parseTimestamp(normalizedTransport);
        if (!Number.isNaN(transportTimestamp)) {
          transportIndex = times.indexOf(normalizedTransport);
          if (transportIndex === -1) {
            const insertIndex = times.findIndex(time => parseTimestamp(time) > transportTimestamp);
            const getNumber = (val) => {
              if (val === null || val === undefined || val === '') {
                return null;
              }
              const num = Number(val);
              return Number.isNaN(num) ? null : num;
            };
            const interpolateTemperature = (prevIdx, nextIdx) => {
              const prevVal = prevIdx >= 0 ? getNumber(temperatures[prevIdx]) : null;
              const nextVal = nextIdx < temperatures.length ? getNumber(temperatures[nextIdx]) : null;
              const prevTime = prevIdx >= 0 ? parseTimestamp(times[prevIdx]) : NaN;
              const nextTime = nextIdx < times.length ? parseTimestamp(times[nextIdx]) : NaN;
              if (prevVal !== null && nextVal !== null && !Number.isNaN(prevTime) && !Number.isNaN(nextTime) && nextTime !== prevTime) {
                const ratio = (transportTimestamp - prevTime) / (nextTime - prevTime);
                const interpolated = prevVal + (nextVal - prevVal) * Math.min(Math.max(ratio, 0), 1);
                return Number(interpolated.toFixed(2));
              }
              if (prevVal !== null) return prevVal;
              if (nextVal !== null) return nextVal;
              return getNumber(temperatures[temperatures.length - 1]);
            };
            let transportTemp;
            if (insertIndex === -1) {
              transportTemp = interpolateTemperature(temperatures.length - 1, temperatures.length - 1);
              times.push(normalizedTransport);
              temperatures.push(transportTemp);
              transportIndex = times.length - 1;
            } else {
              transportTemp = interpolateTemperature(insertIndex - 1, insertIndex);
              times.splice(insertIndex, 0, normalizedTransport);
              temperatures.splice(insertIndex, 0, transportTemp);
              transportIndex = insertIndex;
            }
          }
          if (transportIndex !== -1) {
            transportMarkLine = {
              symbol: 'none',
              data: [
                {
                  xAxis: normalizedTransport,
                  lineStyle: {
                    color: '#FFD04B',
                    type: 'dashed',
                    width: 1.5
                  },
                  label: {
                    formatter: '转运时间',
                    color: '#FFD04B',
                    fontWeight: 'bold'
                  }
                }
              ]
            };
          }
        }
      }
      const beforeAreaStyle = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(67, 200, 255, 0.3)' },
            { offset: 1, color: 'rgba(67, 200, 255, 0.05)' }
          ]
        }
      };
      const afterAreaStyle = {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(255, 129, 96, 0.35)' },
            { offset: 1, color: 'rgba(255, 129, 96, 0.08)' }
          ]
        }
      };
      const baseSeries = {
        name: '温度',
        type: 'line',
        smooth: true,
        data: temperatures,
        connectNulls: true,
        itemStyle: {
          color: '#43C8FF'
        },
        lineStyle: {
          color: '#43C8FF',
          width: 2
        },
        areaStyle: beforeAreaStyle,
        symbol: 'circle',
        symbolSize: 6
      };
      if (transportMarkLine) {
        baseSeries.markLine = transportMarkLine;
      }
      let series = [baseSeries];
      if (transportIndex !== -1) {
        const beforeData = temperatures.map((val, idx) => (idx <= transportIndex ? val : null));
        const afterData = temperatures.map((val, idx) => (idx >= transportIndex ? val : null));
        const beforeSeries = {
          name: '转运前',
          type: 'line',
          smooth: true,
          data: beforeData,
          connectNulls: true,
          itemStyle: {
            color: '#43C8FF'
          },
          lineStyle: {
            color: '#43C8FF',
            width: 2
          },
          areaStyle: beforeAreaStyle,
          symbol: 'circle',
          symbolSize: 6
        };
        if (transportMarkLine) {
          beforeSeries.markLine = transportMarkLine;
        }
        const afterSeries = {
          name: '转运后',
          type: 'line',
          smooth: true,
          data: afterData,
          connectNulls: true,
          itemStyle: {
            color: '#FF8160'
          },
          lineStyle: {
            color: '#FF8160',
            width: 2
          },
          areaStyle: afterAreaStyle,
          symbol: 'circle',
          symbolSize: 6
        };
        series = [beforeSeries, afterSeries];
      }
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter(params) {
            const axisValue = params && params[0] ? params[0].axisValue : '';
            const validParam = Array.isArray(params)
              ? params.find(item => item && item.value !== null && item.value !== undefined && item.value !== '')
              : null;
            const valueText = validParam ? `${validParam.value}°C` : '--';
            return `${axisValue}<br/>温度: ${valueText}`;
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: times,
          axisLabel: {
            color: '#C3E4FF',
            rotate: 45,
            formatter(value) {
              if (value && value.indexOf(' ') > -1) {
                const parts = value.split(' ');
                if (parts.length >= 2) {
                  const datePart = parts[0];
                  const timePart = parts[1];
                  const dateParts = datePart.split('-');
                  if (dateParts.length >= 3) {
                    return `${dateParts[1]}-${dateParts[2]} ${timePart.substring(0, 5)}`;
                  }
                }
              }
              return value;
            }
          },
          axisLine: {
            lineStyle: {
              color: '#5596DF'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '温度(°C)',
          nameTextStyle: {
            color: '#C3E4FF'
          },
          axisLabel: {
            color: '#C3E4FF',
            formatter: '{value}°C'
          },
          axisLine: {
            lineStyle: {
              color: '#5596DF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(85, 150, 223, 0.2)',
              type: 'dashed'
            }
          }
        },
        series
      };
      this.traceTemperatureChart.setOption(option);
      window.addEventListener('resize', this.handleTemperatureChartResize);
    },
    handleTemperatureChartResize() {
      if (this.traceTemperatureChart) {
        this.traceTemperatureChart.resize();
      }
    },
    disposeTemperatureChart() {
      if (this.traceTemperatureChart) {
        window.removeEventListener('resize', this.handleTemperatureChartResize);
        this.traceTemperatureChart.dispose();
        this.traceTemperatureChart = null;
      }
      this.traceTransportTime = '';
    },
    // 动画钩子 - 进入前
    beforeEnter(el) {
      el.style.height = '0';
      el.style.paddingTop = '0';
      el.style.paddingBottom = '0';
      el.style.opacity = '0';
    },
    // 动画钩子 - 进入
    enter(el) {
      if (el.scrollHeight !== 0) {
        el.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
        el.style.height = el.scrollHeight + 'px';
        el.style.paddingTop = '';
        el.style.paddingBottom = '';
        el.style.opacity = '1';
        el.style.overflow = 'hidden';
      } else {
        el.style.height = '';
        el.style.opacity = '';
      }
    },
    // 动画钩子 - 进入后
    afterEnter(el) {
      el.style.height = '';
      el.style.opacity = '';
      el.style.overflow = '';
      el.style.transition = '';
    },
    // 动画钩子 - 离开前
    beforeLeave(el) {
      el.style.height = el.scrollHeight + 'px';
      el.style.opacity = '1';
      el.style.overflow = 'hidden';
    },
    // 动画钩子 - 离开
    leave(el) {
      if (el.scrollHeight !== 0) {
        // 优化收起动画：稍微加快不透明度的消失速度，使其有"渐出"感
        el.style.transition = 'height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out';
        // 强制重绘
        el.offsetHeight; 
        el.style.height = '0';
        el.style.paddingTop = '0';
        el.style.paddingBottom = '0';
        el.style.opacity = '0';
      }
    },
    // 动画钩子 - 离开后
    afterLeave(el) {
      el.style.height = '';
      el.style.opacity = '';
      el.style.overflow = '';
      el.style.paddingTop = '';
      el.style.paddingBottom = '';
      el.style.transition = '';
    },
    // 树状列表展开/收起方法
    toggleCompany(companyId) {
      this.$set(this.expandedCompanies, companyId, !this.expandedCompanies[companyId]);
    },
    toggleShipType(companyId, shipType) {
      const key = `${companyId}-${shipType}`;
      this.$set(this.expandedShipTypes, key, !this.expandedShipTypes[key]);
    },
    // 切换列表收起/展开
    toggleListCollapse() {
      this.isListCollapsed = !this.isListCollapsed;
    },
    // 显示捕捞记录
    showCatchRecords(ship) {
      this.selectedShip = ship;
      const shipName = ship.shipName || ship.name || '未知船只';
      
      // 如果是捕捞船（shipType === '1'），发送HTTP请求
      if (ship.shipType === '1' && ship.shipId) {
        searchRFIDByCatchShipID({ shipId: ship.shipId }).then(res => {
          console.log('捕捞船RFID查询结果:', res);
          // 处理响应数据，可以根据实际返回的数据结构进行调整
          if (res && res.code === 200 && res.success && res.data) {
            const records = Array.isArray(res.data) ? res.data : [res.data];
            // 处理数据：将grade字段映射为squid_size（如果API返回的是squid_size）
            const processedRecords = records.map(record => ({
              ...record,
              grade: record.squid_size || record.grade || '未知'
            }));
            this.processCatchRecordsForCalendar(processedRecords, shipName);
          } else {
            // 如果API返回失败，使用模拟数据作为fallback
            const records = this.mockCatchRecords[shipName] || [];
            this.processCatchRecordsForCalendar(records, shipName);
          }
        }).catch(error => {
          console.error('获取捕捞船RFID数据失败:', error);
          // 如果API异常，使用模拟数据作为fallback
          const records = this.mockCatchRecords[shipName] || [];
          this.processCatchRecordsForCalendar(records, shipName);
        });
      } else {
        // 非捕捞船，使用原有的模拟数据逻辑
        const records = this.mockCatchRecords[shipName] || [];
        this.processCatchRecordsForCalendar(records, shipName);
      }
    },
    // 处理捕捞记录数据，按日期分组并显示日历
    processCatchRecordsForCalendar(records, shipName) {
      // 按日期分组
      const dateMap = {};
      let latestDate = null;
      
      records.forEach(record => {
        const catchTime = record.catch_time || record.catchTime;
        if (!catchTime) return;
        
        // 提取日期部分（YYYY-MM-DD）
        const dateStr = catchTime.split(' ')[0];
        if (!dateMap[dateStr]) {
          dateMap[dateStr] = [];
        }
        dateMap[dateStr].push(record);
        
        // 记录最新的日期
        if (!latestDate || dateStr > latestDate) {
          latestDate = dateStr;
        }
      });
      
      this.catchCalendarData = dateMap;
      this.catchRecordsTitle = `${shipName} - 捕捞日历`;
      
      // 设置默认显示的月份为最新日期所在的月份
      if (latestDate) {
        const latestDateObj = new Date(latestDate);
        this.catchCalendarCurrentMonth = new Date(latestDateObj.getFullYear(), latestDateObj.getMonth(), 1);
      } else {
        this.catchCalendarCurrentMonth = new Date();
      }
      
      // 默认选中最新日期
      this.catchCalendarDate = latestDate;
      this.catchCalendarSelectedDateRecords = latestDate ? (dateMap[latestDate] || []) : [];
      
      // 显示日历弹窗
      this.catchCalendarDialog = true;
    },
    // 日历日期点击事件
    onCalendarDateClick(date) {
      const dateStr = this.formatDate(date);
      this.catchCalendarDate = dateStr;
      this.catchCalendarSelectedDateRecords = this.catchCalendarData[dateStr] || [];
    },
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      if (!date) return '';
      // 如果已经是字符串格式 YYYY-MM-DD，直接返回
      if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}/.test(date)) {
        return date.split(' ')[0];
      }
      const d = new Date(date);
      // 检查日期是否有效
      if (isNaN(d.getTime())) return '';
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取指定日期的捕捞记录数量
    getCatchCountForDate(date) {
      const dateStr = this.formatDate(date);
      return this.catchCalendarData[dateStr] ? this.catchCalendarData[dateStr].length : 0;
    },
    // 判断指定日期是否有捕捞记录
    hasCatchRecord(date) {
      const dateStr = this.formatDate(date);
      return !!this.catchCalendarData[dateStr] && this.catchCalendarData[dateStr].length > 0;
    },
    // 关闭捕捞日历弹窗
    closeCatchCalendarDialog() {
      this.catchCalendarDialog = false;
      this.selectedShip = null;
      this.catchCalendarData = {};
      this.catchCalendarDate = null;
      this.catchCalendarSelectedDateRecords = [];
      this.catchCalendarCurrentMonth = null;
    },
    // 关闭捕捞记录弹窗
    closeCatchRecordsDialog() {
      this.catchRecordsDialog = false;
      this.selectedShip = null;
      this.catchRecordsList = [];
    },
    // 判断记录是否有温度数据
    hasTemperatureData(record) {
      if (!record || !record.details) return false;
      try {
        const details = typeof record.details === 'string' ? JSON.parse(record.details) : record.details;
        return Array.isArray(details) && details.length > 0;
      } catch (e) {
        return false;
      }
    },
    // 显示温度曲线
    showTemperatureChart(record) {
      this.selectedRecord = record;
      try {
        const details = typeof record.details === 'string' ? JSON.parse(record.details) : record.details;
        this.traceTemperatureData = Array.isArray(details) ? details : [];
        this.traceTransportTime = record.transport_time || '';
      } catch (e) {
        console.error('解析温度数据失败:', e);
        this.traceTemperatureData = [];
        this.traceTransportTime = '';
      }
      this.temperatureChartDialog = true;
      this.$nextTick(() => {
        this.initTemperatureChart();
      });
    },
    // 关闭温度曲线弹窗
    closeTemperatureChartDialog() {
      this.temperatureChartDialog = false;
      this.selectedRecord = null;
      this.disposeTemperatureChart();
    },
    // onEnded(v) {
    //   if (v == 'video1')
    //     this.$refs.video1.play()
    //   else
    //     this.$refs.video2.play()
    //   // this.$emit('ended')
    // },
    onCloseCover() {
      this.box = 0;
    },
    // initPlayer(url, SerialNumber) {
    //   if (!SerialNumber || !this.jktokens.value) {
    //     console.error('设备序列号或访问令牌未设置');
    //     return;
    //   }
    //   this.player = new EZUIKit.EZUIKitPlayer({
    //     id: 'video-container',
    //     accessToken: this.jktokens.value,
    //     url: url,
    //     height: '220',
    //     width: '450',
    //     template: 'simple',
    //     autoplay: true,  // 自动播放
    //     handleError: (e) => {  // 添加错误处理
    //       console.error('播放器错误:', e);
    //     }
    //   });
    // },
    // initPlayer1(url, SerialNumber) {
    //   if (!SerialNumber || !this.jktokens.value) {
    //     console.error('设备序列号或访问令牌未设置');
    //     return;
    //   }
    //   this.player1 = new EZUIKit.EZUIKitPlayer({
    //     id: 'video-container1',
    //     accessToken: this.jktokens.value,
    //     url: url,
    //     height: '220',
    //     width: '450',
    //     template: 'simple',
    //     autoplay: true,  // 自动播放
    //     handleError: (e) => {  // 添加错误处理
    //       console.error('播放器错误:', e);
    //     }
    //     // header: ['capturePicture', 'save', 'zoom'],  
    //     // footer: ['hd', 'fullScreen']  
    //   });
    // },
    // GetCamera() {
    //   this.base_id = '3',
    //   getcamera({
    //     base_id: this.base_id,
    //   }).then(res => {
    //     this.cameralist = res.item_list;
    //     const videoAddresses = this.cameralist.map(camera => camera.video_address);
    //     const SerialNumber = this.cameralist.map(camera => camera.serial_number);
    //     this.videoAddresses = videoAddresses;
    //     this.SerialNumber = SerialNumber;
    //     console.log('视频地址数组:', res);
    //     if (this.cameralist.length > 0) {
    //       this.shebeilist.monitoring = this.cameralist;
    //     }

    //     this.initPlayer(this.cameralist[0].video_address, this.SerialNumber[0]);
    //     this.initPlayer1(this.cameralist[1].video_address, this.SerialNumber[1]);
    //   })

    // },
    // async getToken() {
    //   try {
    //     const appKey = '3d0be5dc16b846e58ba2e4efb80d6d7f'; // 替换为你的appKey  
    //     const appSecret = '1d040ec6b1a4d12061fa97ef21987942'; // 替换为你的appSecret  

    //     const response = await axios.post('https://open.ys7.com/api/lapp/token/get',
    //       `appKey=${appKey}&appSecret=${appSecret}`,
    //       {
    //         headers: {
    //           'Content-Type': 'application/x-www-form-urlencoded'
    //         }
    //       }
    //     );
    //     // 处理响应数据  
    //     this.jktokens.value = response.data.data.accessToken;
    //     console.log('shuju:', response.data.data.accessToken); // 这里你应该会看到返回的token数据（如果请求成功的话）  
    //     //  this.jktokens=response.data.accessToken;
    //   } catch (error) {
    //     // 错误处理  
    //     console.error('获取Token失败:', error);
    //   }
    // },
    startPolling() {
      this.intervalId = setInterval(() => {
        this.getlist();
      }, 60000); // 每60秒（1分钟）调用一次getlist
    },
    GetWeather () {
      // 获取 base_id 参数（如果有的话，可以根据需求传入）
      getweather({
        city: this.city,
      }).then(res => {
        this.livetianqi = {
        temperature: res.temperature,  // 温度
        humidity: res.humidity,        // 湿度
        wind_direction: res.wind_direction, // 风向
        wind_power: res.wind_power,     // 风力    
        guangzhao: res.guangzhao, //光照
        precipitation: res.precipitation,   // 降水量
        pressure: res.pressure ,       // 气压
         };
         Object.keys(this.livetianqi).forEach(key => {
          if (Object.prototype.hasOwnProperty.call(this.wetherinfo1, key)) {
            this.wetherinfo1[key].value = this.livetianqi[key];  // 更新value字段
          }
        });
        console.log(this.wetherinfo1);
       })
       .catch(error => {
          // 处理错误并显示错误消息
          console.error('获取天气数据失败:', error);
          this.errorMessage = '获取天气数据失败，请稍后再试。';  // 清除已有的天气数据
        });
    },
    getlist() {
      // Getbasic_data_fish_pond({}).then(res => {
      Getbasic_data_fish_pond({}).then(() => {
        const res = {
          "ponds": [
              {
                  "id": 1,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "A",
                  "pond_number": "2",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 2,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "A",
                  "pond_number": "3",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 3,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "A",
                  "pond_number": "4",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 4,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "B",
                  "pond_number": "1",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 5,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "B",
                  "pond_number": "2",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 6,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "B",
                  "pond_number": "3",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 7,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "B",
                  "pond_number": "4",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 8,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "C",
                  "pond_number": "1",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 9,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "C",
                  "pond_number": "2",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 10,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "C",
                  "pond_number": "3",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 11,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "C",
                  "pond_number": "4",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 12,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "D",
                  "pond_number": "1",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 13,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "D",
                  "pond_number": "2",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 14,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "D",
                  "pond_number": "3",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 15,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "D",
                  "pond_number": "4",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 16,
                  "base": "上海裕安养殖场",
                  "area_number": "A",
                  "pond_number": "1",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 17,
                  "base": "上海裕安养殖场",
                  "area_number": "A",
                  "pond_number": "2",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 18,
                  "base": "上海裕安养殖场",
                  "area_number": "A",
                  "pond_number": "3",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 19,
                  "base": "上海裕安养殖场",
                  "area_number": "A",
                  "pond_number": "4",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 20,
                  "base": "上海裕安养殖场",
                  "area_number": "B",
                  "pond_number": "1",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 21,
                  "base": "上海裕安养殖场",
                  "area_number": "B",
                  "pond_number": "2",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 22,
                  "base": "上海裕安养殖场",
                  "area_number": "B",
                  "pond_number": "3",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 23,
                  "base": "上海裕安养殖场",
                  "area_number": "B",
                  "pond_number": "4",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 24,
                  "base": "上海裕安养殖场",
                  "area_number": "C",
                  "pond_number": "1",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 25,
                  "base": "上海裕安养殖场",
                  "area_number": "C",
                  "pond_number": "2",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 26,
                  "base": "上海裕安养殖场",
                  "area_number": "C",
                  "pond_number": "3",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 27,
                  "base": "上海裕安养殖场",
                  "area_number": "C",
                  "pond_number": "4",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 28,
                  "base": "上海裕安养殖场",
                  "area_number": "D",
                  "pond_number": "1",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 29,
                  "base": "上海裕安养殖场",
                  "area_number": "D",
                  "pond_number": "2",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 30,
                  "base": "上海裕安养殖场",
                  "area_number": "D",
                  "pond_number": "3",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 31,
                  "base": "上海裕安养殖场",
                  "area_number": "D",
                  "pond_number": "4",
                  "area": "120",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "200000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              },
              {
                  "id": 32,
                  "base": "舟山宁泰远洋渔业",
                  "area_number": "A",
                  "pond_number": "1",
                  "area": "60",
                  "wide": "",
                  "length": "",
                  "variety": "",
                  "date": "",
                  "quantity": "",
                  "specifications": "",
                  "total": "100000",
                  "unit_price": "",
                  "total_price": "",
                  "remark": ""
              }
          ]
        };
        const result = {};
        console.log("res", res);
        res.ponds.forEach(item => {
          const base = item.base;
          const area = parseFloat(item.area) || 0;
          const total = parseFloat(item.total) / 1000 || 0; // 转换为吨

          if (!result[base]) {
            result[base] = {
              totalArea: 0,
              totalYield: 0
            };
          }

          // 累加每个base的面积和总量
          result[base].totalArea += area;
          result[base].totalYield += total;
        });

        // 将统计结果转换为所需的数组格式
        this.volumeDetailData = [
          {
            name: "捕捞量(吨)", data: [
              result['舟山宁泰远洋渔业'] ? result['舟山宁泰远洋渔业'].totalArea : 2000,
              result['宣城水产养殖基地'] ? result['宣城水产养殖基地'].totalArea : 1500,
              result['上海裕安养殖场'] ? result['上海裕安养殖场'].totalArea : 1300,
              result['竖新养殖基地'] ? result['竖新养殖基地'].totalArea : 1400,
              result['上海金山水产养殖场'] ? result['上海金山水产养殖场'].totalArea : 800,
              result['奉贤欣兴鲈鱼养殖基地'] ? result['奉贤欣兴鲈鱼养殖基地'].totalArea : 900
            ]
          },
          {
            name: "运输量(吨)", data: [
              result['舟山宁泰远洋渔业'] ? result['舟山宁泰远洋渔业'].totalYield : 1800,
              result['宣城水产养殖基地'] ? result['宣城水产养殖基地'].totalYield : 1900,
              result['上海裕安养殖场'] ? result['上海裕安养殖场'].totalYield : 3000,
              result['竖新养殖基地'] ? result['竖新养殖基地'].totalYield : 1600,
              result['上海金山水产养殖场'] ? result['上海金山水产养殖场'].totalYield : 2500,
              result['奉贤欣兴鲈鱼养殖基地'] ? result['奉贤欣兴鲈鱼养殖基地'].totalYield : 3000
            ]
          }
        ];
        console.log(this.volumeDetailData);

      })
      GetProductionRecords({}).then(res => {
        const colorMap = [
          'rgba(179,229,251,1)',  // 蓝色
          'rgba(250,210,95,1)',   // 黄色
          'rgba(249,170,114,1)',  // 橙色
          'rgba(79,191,227,1)'    // 深蓝色
        ];
        const speciesSum = res.productionReports.reduce((acc, report) => {
          const species = report.species;
          const value = parseInt(report.seedQuantity, 10) || 0;

          if (!acc[species]) {
            acc[species] = 0;
          }
          acc[species] += value;
          return acc;
        }, {});

        // 转换为所需的格式并分配颜色
        this.optionsData = Object.entries(speciesSum).map(([species, value], index) => {
          return {
            name: species,
            value: value,
            itemStyle: {
              color: colorMap[index % colorMap.length] // 使用取模运算循环使用颜色
            }
          };
        }).sort((a, b) => b.value - a.value);

      })
      // 基地列表暂时注释
      // homelist({}).then(res => {
      //   this.baselist = res.data.baselist;
      //   this.updateMapMarkers();
      //   // let tianqi = res.data.tianqi;
      //   // Object.keys(tianqi).forEach(key => {
      //   //   if (Object.prototype.hasOwnProperty.call(this.wetherinfo, key)) {
      //   //     this.wetherinfo[key].value = parseFloat(parseFloat(tianqi[key]).toFixed(1));
      //   //   }
      //   // });
      //   if (res.data.alertlist.length > 0) {
      //     const firstAlert = res.data.alertlist[0];
      //     const describe = firstAlert.describe;
      //     // 使用正则表达式提取 TEM, PH, O2 的值
      //     const regex = /TEM:(\d+\.\d+) PH:(\d+\.\d+) O2:(\d+\.\d+)/;
      //   } else {
      //     console.error("alertlist 为空");
      //   }
      // });

      //此处更改首页“水质参数”的设备
      select_equipmentv2({
        base_id: '3',
        equipmentID: 11
      }).then(res => {
        const data = res.data.shuju
        this.lineData = []
        this.alertlist.tem =data.templist[0].y[0].data.at(-1)
        this.alertlist.ph =  data.templist[2].y[0].data.at(-1)
        this.alertlist.o2 = data.templist[1].y[0].data.at(-1)
      })

    },
    onSelectCompany(company) {
      this.selectedCompany = company
      this.showCompanyModal = true
    },
    closeCompanyModal() {
      this.showCompanyModal = false
    },
    // 处理渔场捕捞量统计点击事件
    handleFishingVolumeClick(event) {
      if (event && event.currentTarget) {
        const rect = event.currentTarget.getBoundingClientRect();
        this.chartDropdownPos = {
          top: rect.bottom + 10, // 按钮底部 + 间距
          left: rect.left + (rect.width / 2) // 按钮中心
        };
      }
      this.showChartTypeDropdown = !this.showChartTypeDropdown;
    },
    // 点击外部关闭下拉框
    handleClickOutside(event) {
      if (this.showChartTypeDropdown && !event.target.closest('.chart-type-dropdown') && !event.target.closest('.stat-button')) {
        this.showChartTypeDropdown = false;
      }
      if (this.showFishingAreaDropdown && !event.target.closest('.fishing-area-dropdown') && !event.target.closest('.stat-button')) {
        this.showFishingAreaDropdown = false;
      }
    },
    // 处理作业海域统计点击事件
    handleFishingAreaClick(event) {
      if (event && event.currentTarget) {
        const rect = event.currentTarget.getBoundingClientRect();
        this.areaDropdownPos = {
          top: rect.bottom + 10, // 按钮底部 + 间距
          left: rect.left + (rect.width / 2) // 按钮中心
        };
      }
      this.showFishingAreaDropdown = !this.showFishingAreaDropdown;
    },
    // 选择渔场并跳转
    selectFishingArea(item) {
      this.showFishingAreaDropdown = false;
      this.handleFishingGroundClick(item);
    },
    // 选择捕捞量柱状图
    selectBarChart() {
      this.showChartTypeDropdown = false;
      this.showFishingGroundsModal = true;
    },
    // 选择捕捞量趋势图
    selectTrendChart() {
      this.showChartTypeDropdown = false;
      this.showFishingTrendModal = true;
    },
    // 关闭捕捞量柱状图弹窗
    closeFishingGroundsModal() {
      this.showFishingGroundsModal = false;
    },
    // 关闭捕捞量趋势图弹窗
    closeFishingTrendModal() {
      this.showFishingTrendModal = false;
    },
    handleFishingGroundClick(item) {
      // 根据BASE_LOCATION跳转到地图相应位置
      if (!this.map) return;
      
      const [lng, lat] = item.BASE_LOCATION.split(',').map(coord => parseFloat(coord));
      
      // 跳转到指定位置
      this.map.setCenter([lng, lat]);
      
      // 可选：设置缩放级别以更好地查看该区域
      this.map.setZoom(5);
    },
    renderMap() {// 渲染地图
      this.$AMapLoader.load({
        key: 'bb41d02b6376f70646e2490b6bf5f80b',
        version: '1.4.15',
        plugins: ['AMap.MapType'], // 添加地图类型切换插件
        AMapUI: {
          version: '1.1',
          plugins: []
        },
        Loca: {
          version: '1.3.2'
        }
      }).then((AMap) => {
        this.AMap = AMap; // 将 AMap 赋值给组件的属性
        this.map = new AMap.Map('map-container', {
          // 移除了 mapStyle，让普通地图显示默认颜色（绿色大陆、蓝色海域）
          // mapStyle: 'amap://styles/whitesmoke', // 注释掉以显示默认地图颜色
          //zoom: 8,
          zoom: 2,
          layers: [new AMap.TileLayer.Satellite()],
          //center: [122.04244146794094, 30.873747312721857]
          center: [150, 41]//北太平洋渔场定位
        });
        
        // 添加地图类型切换控件
        this.map.addControl(new AMap.MapType({
          defaultType: 1 // 0代表默认地图，1代表卫星地图
        }));
        
        this.updateMapMarkers();
      });
    },
    updateMapMarkers() {// 更新地图
      if (!this.map) return;
      // 清除之前的标记
      this.map.clearMap();
      this.fishworklist.forEach((item, index) => {
        const isSecondMarker = index === 0 || index === 2; // 判断是否是第二个标签
        const marker = new this.AMap.Marker({ // 使用 this.AMap
          position: item.BASE_LOCATION.split(',').map(parseFloat),
          label: {
            content: item.BASE_NAME,
            direction: isSecondMarker ? 'right' : 'center', // 第二个标签设为靠右
            offset: isSecondMarker ? new this.AMap.Pixel(0, -20) : new this.AMap.Pixel(0, -50), // 调整偏移以适应右侧
            style: {
              fontSize: '20',
              color: '#000',
            }
          },
          icon: new this.AMap.Icon({
            size: new this.AMap.Size(60, 50),
            image: require('@/assets/ui/position.png'),
            imageSize: new this.AMap.Size(60, 50)
          }),
          offset: new this.AMap.Pixel(-25, -55)
        });

        marker.on('click', () => {
          this.box = 1;     
          this.miaoshu = item.INTRODUCE;  // 更新描述框内容
          this.map.setCenter(item.BASE_LOCATION.split(',').map(coord => parseFloat(coord)));  // 定位到该标记
          this.$forceUpdate();
        });
        this.map.add(marker);
      });
      
      // 添加船舶红色小旗标记
      this.addShipMarkers();
    },
    //按类型分配船舶标记到渔场或港口附近
    addShipMarkers() {
      // 处理捕捞船 - 根据ship.location分配到对应渔场附近
      this.fishingShipsMock.forEach((ship) => {
        let baseLng, baseLat;
        
        if (ship.location) {
          // 根据ship.location找到对应的渔场
          const targetFishwork = this.fishworklist.find(
            fishwork => fishwork.BASE_LOCATION === ship.location
          );
          
          if (targetFishwork) {
            // 找到对应渔场，使用渔场坐标
            [baseLng, baseLat] = targetFishwork.BASE_LOCATION.split(',').map(parseFloat);
          } else {
            // 没找到对应渔场，直接使用ship.location作为基础坐标
            [baseLng, baseLat] = ship.location.split(',').map(parseFloat);
          }
        } else {
          // 如果没有location，按原逻辑分配
          const fishwork = this.fishworklist[0];
          [baseLng, baseLat] = fishwork.BASE_LOCATION.split(',').map(parseFloat);
        }
        
        // 在指定位置附近随机分布（±1.0度范围内）
        const randomLng = baseLng + (Math.random() - 0.5) * 2.0;
        const randomLat = baseLat + (Math.random() - 0.5) * 2.0;
        
        this.createShipMarker(ship, [randomLng, randomLat]);
      });
      
      // 处理运输船 - 部分在渔场，部分在大陆港口
      this.transportShipsMock.forEach((ship, index) => {
        let position;
        
        // 50%概率在大陆港口，50%在渔场
        if (Math.random() > 0.5) {
          // 在大陆港口附近
          const port = this.mainlandPorts[index % this.mainlandPorts.length];
          const [portLng, portLat] = port.location.split(',').map(parseFloat);
          position = [
            portLng + (Math.random() - 0.5) * 0.5,
            portLat + (Math.random() - 0.5) * 0.5
          ];
        } else {
          // 在渔场附近
          const fishwork = this.fishworklist[index % this.fishworklist.length];
          const [baseLng, baseLat] = fishwork.BASE_LOCATION.split(',').map(parseFloat);
          position = [
            baseLng + (Math.random() - 0.5) * 2.0,
            baseLat + (Math.random() - 0.5) * 2.0
          ];
        }
        
        this.createShipMarker(ship, position);
      });
    },
    
    // 创建船舶标记的通用方法
    createShipMarker(ship, position) {
      const shipMarker = new this.AMap.Marker({
        position: position,
        icon: new this.AMap.Icon({
          size: new this.AMap.Size(40, 40),
          image: require('@/assets/ui/device-icon-o2.png'),
          imageSize: new this.AMap.Size(40, 40)
        }),
        label: {
          content: ship.name,
          direction: 'bottom',
          offset: new this.AMap.Pixel(0, 5),
          style: {
            fontSize: '12',
            color: '#FFFFFF',
            background: 'rgba(0, 0, 0, 0.6)',
            padding: '2px 4px',
            borderRadius: '2px'
          }
        },
        offset: new this.AMap.Pixel(-20, -20)
      });
      
      // 点击船舶显示详细信息
      shipMarker.on('click', () => {
        alert(`船舶名称：${ship.name}\n吨位：${ship.tonnage}吨\n状态：${ship.status}`);
      });
      
      this.map.add(shipMarker);
    }
  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId); // 组件销毁时清除定时器
    }
    // 移除全局点击事件监听器
    document.removeEventListener('click', this.handleClickOutside);
    this.disposeTraceChart();
    this.disposeTemperatureChart();
  }
};
</script>
<template>

  <div class="w-100 h-100 d-flex flex-column  ">

    <div class="w-100 h-100 map-container position-absolute " id="map-container"></div>
    <!-- <img src="@/assets/ui/bg.png" alt="" class="w-100 h-100 position-absolute top-0 left-0"
      style="pointer-events: none;"> -->
    <!-- 企业船舶弹窗 -->
    <div v-if="showCompanyModal" class="modal-mask d-flex align-items-center justify-content-center">
      <div class="modal-panel">
        <div class="modal-header d-flex align-items-center justify-content-between">
          <div class="modal-title">{{ selectedCompany ? selectedCompany.BASE_NAME : '企业船舶' }}</div>
          <div class="modal-close cursor-pointer" @click="closeCompanyModal">✕</div>
        </div>
        <div class="modal-body d-flex">
          <div class="modal-col">
            <div class="modal-col-title">捕捞船</div>
            <ul class="ship-list">
              <li v-for="s in fishingShipsMock" :key="s.id" class="ship-item">
                <span>{{ s.name }}</span>
              </li>
            </ul>
          </div>
          <div class="modal-divider"></div>
          <div class="modal-col">
            <div class="modal-col-title">运输船</div>
            <ul class="ship-list">
              <li v-for="s in transportShipsMock" :key="s.id" class="ship-item">
                <span>{{ s.name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图表类型下拉框 -->
    <div 
      v-if="showChartTypeDropdown" 
      class="chart-type-dropdown"
      :style="{ top: chartDropdownPos.top + 'px', left: chartDropdownPos.left + 'px', transform: 'translateX(-50%)' }"
      @click.stop
    >
      <div 
        class="dropdown-item cursor-pointer" 
        @click="selectBarChart"
      >
        <span>捕捞量柱状图</span>
      </div>
      <div 
        class="dropdown-item cursor-pointer" 
        @click="selectTrendChart"
      >
        <span>捕捞量趋势图</span>
      </div>
    </div>
    
    <!-- 作业海域统计下拉框 -->
    <div 
      v-if="showFishingAreaDropdown" 
      class="fishing-area-dropdown"
      :style="{ top: areaDropdownPos.top + 'px', left: areaDropdownPos.left + 'px', transform: 'translateX(-50%)' }"
      @click.stop
    >
      <div 
        v-for="item in fishworklist" 
        :key="item.ID"
        class="dropdown-item cursor-pointer" 
        @click="selectFishingArea(item)"
      >
        <span>{{ item.BASE_NAME }}</span>
      </div>
    </div>
    
    <!-- 捕捞记录弹窗 -->
    <el-dialog
      :visible.sync="catchRecordsDialog"
      :title="catchRecordsTitle"
      width="1200px"
      custom-class="catch-records-dialog"
      :close-on-click-modal="false"
      @close="closeCatchRecordsDialog"
    >
      <div class="catch-records-container">
        <el-table
          :data="catchRecordsList"
          style="width: 100%"
          :header-cell-style="{ background: 'rgba(44, 81, 153, 0.6)', color: '#C3E4FF', border: '1px solid rgba(85, 150, 223, 0.3)' }"
          :row-style="{ background: 'rgba(10, 20, 40, 0.9)', color: '#C3E4FF' }"
          stripe
        >
          <el-table-column label="编号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="RFID" label="RFID" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="grade" label="渔获等级" width="90">
            <template slot-scope="scope">
              <el-tag :type="scope.row.grade === '大' ? 'success' : scope.row.grade === '中' ? 'warning' : 'info'" size="small">
                {{ scope.row.grade }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="ship_name" label="捕捞船名" width="140"></el-table-column>
          <el-table-column prop="location" label="捕捞地点" width="220" show-overflow-tooltip></el-table-column>
          <el-table-column prop="catch_time" label="捕捞时间" width="200"></el-table-column>
          <el-table-column prop="transport_ship" label="转运船名" width="140"></el-table-column>
          <el-table-column prop="transport_time" label="转运时间" width="200"></el-table-column>
          <el-table-column prop="arrive_time" label="到港时间" width="200"></el-table-column>
          <el-table-column prop="port_name" label="港口名" width="140"></el-table-column>
          <el-table-column label="详情" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="showTemperatureChart(scope.row)"
                style="color: #43C8FF; cursor: pointer;"
              >
                温度曲线
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCatchRecordsDialog">关闭</el-button>
      </span>
    </el-dialog>
    
    <!-- 温度曲线弹窗 -->
    <el-dialog
      title="温度变化曲线"
      :visible.sync="temperatureChartDialog"
      width="800px"
      custom-class="temperature-chart-dialog"
      :close-on-click-modal="false"
      @close="closeTemperatureChartDialog"
    >
      <div class="temperature-chart-content">
        <div v-if="traceTemperatureData && traceTemperatureData.length" class="trace-temperature-chart-container">
          <div ref="temperatureChart" class="trace-temperature-chart"></div>
        </div>
        <div v-else class="trace-detail-text">
          <el-input
            type="textarea"
            :rows="8"
            v-model="traceRecordDetail"
            placeholder="暂无详情内容"
            :readonly="true"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTemperatureChartDialog">关闭</el-button>
      </span>
    </el-dialog>
    
    <!-- 捕捞日历弹窗 -->
    <el-dialog
      :title="catchRecordsTitle"
      :visible.sync="catchCalendarDialog"
      width="1400px"
      custom-class="catch-calendar-dialog"
      :close-on-click-modal="false"
      @close="closeCatchCalendarDialog"
    >
      <div class="catch-calendar-container">
        <div class="catch-calendar-wrapper">
          <el-calendar
            v-model="catchCalendarCurrentMonth"
            class="catch-calendar"
          >
            <template slot="dateCell" slot-scope="{date}">
              <div 
                class="calendar-day-cell"
                :class="{
                  'has-catch': hasCatchRecord(date),
                  'selected': formatDate(date) === catchCalendarDate
                }"
                @click="onCalendarDateClick(date)"
              >
                <div class="calendar-day-number">{{ new Date(date).getDate() }}</div>
                <div v-if="hasCatchRecord(date)" class="calendar-day-badge">
                  {{ getCatchCountForDate(date) }}
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
        <div class="catch-records-panel">
          <div class="catch-records-header">
            <h3 v-if="catchCalendarDate">
              {{ catchCalendarDate }} 的捕捞记录
              <span class="record-count">({{ catchCalendarSelectedDateRecords.length }}条)</span>
            </h3>
            <h3 v-else class="no-date-selected">请选择日期查看捕捞记录</h3>
          </div>
          <div class="catch-records-content">
            <el-table
              v-if="catchCalendarSelectedDateRecords.length > 0"
              :data="catchCalendarSelectedDateRecords"
              style="width: 100%"
              :header-cell-style="{ background: 'rgba(44, 81, 153, 0.6)', color: '#C3E4FF', border: '1px solid rgba(85, 150, 223, 0.3)' }"
              :row-style="{ background: 'rgba(10, 20, 40, 0.9)', color: '#C3E4FF' }"
              stripe
              max-height="400"
            >
              <el-table-column label="编号" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="RFID" label="RFID" width="180" show-overflow-tooltip></el-table-column>
              <el-table-column prop="squid_size" label="渔获等级" width="100">
                <template slot-scope="scope">
                  <el-tag 
                    :type="scope.row.squid_size === '一级' ? 'success' : scope.row.squid_size === '二级' ? 'warning' : 'info'" 
                    size="small"
                  >
                    {{ scope.row.squid_size || scope.row.grade || '未知' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="ship_name" label="捕捞船名" width="140"></el-table-column>
              <el-table-column prop="location" label="捕捞地点" width="220" show-overflow-tooltip></el-table-column>
              <el-table-column prop="catch_time" label="捕捞时间" width="180"></el-table-column>
              <el-table-column prop="transport_ship" label="转运船名" width="140">
                <template slot-scope="scope">
                  {{ scope.row.transport_ship || '--' }}
                </template>
              </el-table-column>
              <el-table-column prop="transport_time" label="转运时间" width="180">
                <template slot-scope="scope">
                  {{ scope.row.transport_time || '--' }}
                </template>
              </el-table-column>
              <el-table-column prop="arrive_time" label="到港时间" width="180">
                <template slot-scope="scope">
                  {{ scope.row.arrive_time || '--' }}
                </template>
              </el-table-column>
              <el-table-column prop="port_name" label="港口名" width="140">
                <template slot-scope="scope">
                  {{ scope.row.port_name || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="详情" width="120" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    v-if="hasTemperatureData(scope.row)"
                    type="text"
                    size="small"
                    @click="showTemperatureChart(scope.row)"
                    style="color: #43C8FF; cursor: pointer;"
                  >
                    温度曲线
                  </el-button>
                  <span v-else style="color: #6C8CBC; font-size: 12px;">暂无数据</span>
                </template>
              </el-table-column>
            </el-table>
            <div v-else class="no-records">
              <p>该日期暂无捕捞记录</p>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCatchCalendarDialog">关闭</el-button>
      </span>
    </el-dialog>
    
    <!-- 捕捞量柱状图弹窗 -->
    <div 
      v-if="showFishingGroundsModal" 
      class="fishing-chart-modal-mask d-flex align-items-center justify-content-center"
      @click.self="closeFishingGroundsModal"
    >
      <div class="fishing-chart-modal-panel">
        <div class="fishing-chart-modal-header d-flex align-items-center justify-content-between">
          <div class="fishing-chart-modal-title">产量统计 - 柱状图</div>
          <div class="fishing-chart-modal-close cursor-pointer" @click="closeFishingGroundsModal">✕</div>
        </div>
        <div class="fishing-chart-modal-body">
          <FishingGrounds></FishingGrounds>
        </div>
      </div>
    </div>
    
    <!-- 捕捞量趋势图弹窗 -->
    <div 
      v-if="showFishingTrendModal" 
      class="fishing-chart-modal-mask d-flex align-items-center justify-content-center"
      @click.self="closeFishingTrendModal"
    >
      <div class="fishing-chart-modal-panel">
        <div class="fishing-chart-modal-header d-flex align-items-center justify-content-between">
          <div class="fishing-chart-modal-title">产量统计 - 趋势图</div>
          <div class="fishing-chart-modal-close cursor-pointer" @click="closeFishingTrendModal">✕</div>
        </div>
        <div class="fishing-chart-modal-body">
          <FishingTrend></FishingTrend>
        </div>
      </div>
    </div>
    
    <el-dialog
      :visible.sync="showTraceDialog"
      :title="traceModalTitle"
      width="1200px"
      custom-class="trace-records-dialog"
      :close-on-click-modal="false"
      @close="onTraceDialogClose"
    >
      <div class="trace-records-container">
        <div v-if="traceRecordMeta" class="trace-record-meta">
          <div>捕捞船：{{ traceRecordMeta.record.ship_name }}</div>
          <div>捕捞时间：{{ traceRecordMeta.record.catch_time }}</div>
          <div>捕捞地点：{{ traceRecordMeta.record.location }}</div>
        </div>
        <el-table
          :data="traceRecordsTable"
          style="width: 100%"
          :header-cell-style="{ background: 'rgba(44, 81, 153, 0.6)', color: '#C3E4FF', border: '1px solid rgba(85, 150, 223, 0.3)' }"
          :row-style="{ background: 'rgba(10, 20, 40, 0.9)', color: '#C3E4FF' }"
          stripe
        >
          <el-table-column label="编号" width="80" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="RFID" label="RFID" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="squid_size" label="渔获等级" width="90">
            <template slot-scope="scope">
              <el-tag :type="scope.row.squid_size === '大' ? 'success' : scope.row.squid_size === '中' ? 'warning' : 'info'" size="small">
                {{ scope.row.squid_size }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="ship_name" label="捕捞船名" width="140"></el-table-column>
          <el-table-column prop="location" label="捕捞地点" width="220" show-overflow-tooltip></el-table-column>
          <el-table-column prop="catch_time" label="捕捞时间" width="200"></el-table-column>
          <el-table-column prop="transport_ship" label="转运船名" width="140"></el-table-column>
          <el-table-column prop="transport_time" label="转运时间" width="200"></el-table-column>
          <el-table-column prop="arrive_time" label="到港时间" width="200"></el-table-column>
          <el-table-column prop="port_name" label="港口名" width="140"></el-table-column>
          <el-table-column prop="details" label="详情" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="openTraceRecordDetail(scope.row)"
                style="color: #43C8FF; cursor: pointer;"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTraceDialog = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="温度变化详情"
      :visible.sync="traceDetailDialog"
      width="800px"
      :close-on-click-modal="false"
      custom-class="trace-detail-dialog"
      @close="closeTraceDetailDialog"
    >
      <div class="trace-detail-content">
        <div v-if="traceTemperatureData && traceTemperatureData.length" class="trace-temperature-chart-container">
          <div class="chart-title">温度变化曲线</div>
          <div ref="traceTemperatureChart" class="trace-temperature-chart"></div>
        </div>
        <div v-else class="trace-detail-text">
          <el-input
            type="textarea"
            :rows="8"
            v-model="traceRecordDetail"
            placeholder="暂无详情内容"
            :readonly="true"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTraceDetailDialog">关闭</el-button>
      </span>
    </el-dialog>
    <div v-if="box === 1" class="equip-box">
      <img src="@/assets/ui/prompt.png" alt="">
      <div class="text" style="white-space: pre-wrap;">{{ miaoshu }}</div>
      <div class="close-icon d-flex align-items-center justify-content-center" @click="onCloseCover">
        <svg t="1639825855503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="26567" width="1rem" height="1rem">
          <path
            d="M846.005097 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519L96.632851 254.131955c-43.644009-43.644009-43.644009-114.348328 0-157.992337s114.348328-43.644009 157.992337 0L925.001265 766.515694c43.644009 43.644009 43.644009 114.348328 0 157.992337C903.17926 946.330036 874.592179 957.24155 846.005097 957.24155z"
            p-id="26568" fill="#ffffff"></path>
          <path
            d="M175.62902 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519-43.644009-43.644009-43.644009-114.348328 0-157.992337L767.008928 96.139617c43.644009-43.644009 114.348328-43.644009 157.992337 0s43.644009 114.348328 0 157.992337L254.625188 924.508032C232.803183 946.330036 204.216101 957.24155 175.62902 957.24155z"
            p-id="26569" fill="#ffffff"></path>
        </svg>
      </div>
    </div>
    <div class="header">
      <Head2 
        :trace-search-enabled="true" 
        @trace-search="handleTraceSearch"
        @fishing-volume-stat="handleFishingVolumeClick"
        @fishing-area-stat="handleFishingAreaClick"
      ></Head2>
    </div>
    <div class="main d-flex flex-row  ">
      <!-- 展开按钮（仅在收起时显示）- 右侧三角形，移到外面避免被收起 -->
      <div class="list-expand-btn" :class="{ 'visible': isListCollapsed }" @click="toggleListCollapse"></div>
      <div class="home-sidebar" :class="{ collapsed: isListCollapsed }">
        <div class="tree-list-wrapper">
          <SubtitledSection title="企业船舶列表">
            <template>
              <div class="tree-list-container">
                <!-- 使用API数据 -->
                <template v-if="companyShipsList.length > 0">
                  <div 
                    v-for="company in companyShipsList" 
                    :key="company.companyId" 
                    class="tree-node company-node"
                  >
                    <!-- 企业节点 -->
                    <div 
                      class="tree-node-header cursor-pointer" 
                      @click="toggleCompany(company.companyId)"
                    >
                      <span 
                        class="tree-node-arrow" 
                        :class="{ expanded: expandedCompanies[company.companyId] }"
                      >▼</span>
                      <span class="tree-node-label">{{ company.companyName }}</span>
                      <span class="tree-node-count">({{ company.ships.reduce((sum, type) => sum + type.ships.length, 0) }})</span>
                    </div>
                    
                    <!-- 船舶类型列表 -->
                    <transition
                      @before-enter="beforeEnter"
                      @enter="enter"
                      @after-enter="afterEnter"
                      @before-leave="beforeLeave"
                      @leave="leave"
                      @after-leave="afterLeave"
                    >
                      <div 
                        v-show="expandedCompanies[company.companyId]" 
                        class="tree-node-children"
                      >
                        <div 
                          v-for="shipType in company.ships" 
                          :key="`${company.companyId}-${shipType.shipType}`"
                          class="tree-node ship-type-node"
                        >
                          <!-- 船只类型节点 -->
                          <div 
                            class="tree-node-header cursor-pointer" 
                            @click.stop="toggleShipType(company.companyId, shipType.shipType)"
                          >
                            <span 
                              class="tree-node-arrow" 
                              :class="{ expanded: expandedShipTypes[`${company.companyId}-${shipType.shipType}`] }"
                            >▼</span>
                            <span class="tree-node-label">{{ shipType.shipTypeName }}</span>
                            <span class="tree-node-count">({{ shipType.ships.length }})</span>
                          </div>
                          
                          <!-- 船只列表 -->
                          <transition
                            @before-enter="beforeEnter"
                            @enter="enter"
                            @after-enter="afterEnter"
                            @before-leave="beforeLeave"
                            @leave="leave"
                            @after-leave="afterLeave"
                          >
                            <div 
                              v-show="expandedShipTypes[`${company.companyId}-${shipType.shipType}`]" 
                              class="tree-node-children ship-list"
                            >
                              <div 
                                v-for="ship in shipType.ships" 
                                :key="ship.shipId"
                                class="tree-node ship-node cursor-pointer"
                                @click.stop="showCatchRecords(ship)"
                              >
                                <div class="tree-node-header">
                                  <span class="ship-icon">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF0000" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C5.78 20.53 4.39 21 3 21H2v2h1c1.38 0 2.74-.35 4-1 2.5 1.3 5.5 1.3 8 0 1.26.65 2.62 1 4 1h1v-2h-1zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l2.18-7.65-2.23-.73V4h-5V1H9v3H4v6.62l-2.23.73L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"/>
                                    </svg>
                                  </span>
                                  <span class="tree-node-label">{{ ship.shipName }}</span>
                                </div>
                              </div>
                            </div>
                          </transition>
                        </div>
                      </div>
                    </transition>
                  </div>
                </template>
                
                <!-- 如果没有API数据，使用默认的baselist -->
                <template v-else>
                  <div 
                    v-for="company in baselist" 
                    :key="company.ID" 
                    class="tree-node company-node"
                  >
                    <!-- 企业节点 -->
                    <div 
                      class="tree-node-header cursor-pointer" 
                      @click="toggleCompany(company.ID)"
                    >
                      <span 
                        class="tree-node-arrow" 
                        :class="{ expanded: expandedCompanies[company.ID] }"
                      >▼</span>
                      <span class="tree-node-label">{{ company.BASE_NAME }}渔船</span>
                      <span class="tree-node-count">({{ fishingShipsMock.length + transportShipsMock.length }})</span>
                    </div>
                    
                    <!-- 船舶列表 -->
                    <transition
                      @before-enter="beforeEnter"
                      @enter="enter"
                      @after-enter="afterEnter"
                      @before-leave="beforeLeave"
                      @leave="leave"
                      @after-leave="afterLeave"
                    >
                      <div 
                        v-show="expandedCompanies[company.ID]" 
                        class="tree-node-children ship-list"
                      >
                        <!-- 捕捞船列表 -->
                        <div 
                          v-for="ship in fishingShipsMock" 
                          :key="ship.id"
                          class="tree-node ship-node cursor-pointer"
                          @click.stop="showCatchRecords(ship)"
                        >
                          <div class="tree-node-header">
                            <span class="ship-icon">
                              <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF0000" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C5.78 20.53 4.39 21 3 21H2v2h1c1.38 0 2.74-.35 4-1 2.5 1.3 5.5 1.3 8 0 1.26.65 2.62 1 4 1h1v-2h-1zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l2.18-7.65-2.23-.73V4h-5V1H9v3H4v6.62l-2.23.73L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"/>
                              </svg>
                            </span>
                            <span class="tree-node-label">{{ ship.name }}</span>
                          </div>
                        </div>
                        <!-- 运输船列表 -->
                        <div 
                          v-for="ship in transportShipsMock" 
                          :key="ship.id"
                          class="tree-node ship-node cursor-pointer"
                          @click.stop="showCatchRecords(ship)"
                        >
                          <div class="tree-node-header">
                            <span class="ship-icon">
                              <svg width="16" height="16" viewBox="0 0 24 24" fill="#FF0000" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C5.78 20.53 4.39 21 3 21H2v2h1c1.38 0 2.74-.35 4-1 2.5 1.3 5.5 1.3 8 0 1.26.65 2.62 1 4 1h1v-2h-1zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l2.18-7.65-2.23-.73V4h-5V1H9v3H4v6.62l-2.23.73L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"/>
                              </svg>
                            </span>
                            <span class="tree-node-label">{{ ship.name }}</span>
                          </div>
                        </div>
                      </div>
                    </transition>
                  </div>
                </template>
              </div>
            </template>
          </SubtitledSection>
          <!-- 收起按钮 -->
          <div class="list-collapse-btn" @click="toggleListCollapse">
            <span class="collapse-icon">◀</span>
            <span class="collapse-text">收起</span>
          </div>
        </div>
      </div>
      <div class="home-center">
        
        <div class="bottom-box ">
          <!-- <div style="width: 49.5%;">
            <SubtitledSectionLong title="设备监控">
              <template>
                <div class="video-wrapper">
                  <div id="video-container" class="video-content">
                    <img src="../assets/img/jiankong(2).png" alt="视频占位图">
                  </div>
                </div>
              </template>
            </SubtitledSectionLong>
          </div>
          <div style="width: 49.5%;margin-left: 0.6rem;">
            <SubtitledSectionLong title="设备监控">
              <template>
                <div class="video-wrapper">
                  <div id="video-container" class="video-content">
                    <img src="../assets/img/jiankong(1).png" alt="视频占位图">
                  </div>
                </div>
              </template>
            </SubtitledSectionLong>
          </div> -->
        </div>
      </div>
      <div class="home-sidebar ">
        <div>
          <!-- <SubtitledSection title="渔场捕捞量柱状图" style="pointer-events: auto;">
            <template> -->
              <!-- <FishingTypes></FishingTypes> -->
              <!-- <FishingGrounds></FishingGrounds>
            </template>
          </SubtitledSection> -->
        </div>
        <div>
          <!-- <SubtitledSection title="渔场捕捞量趋势图">
            <template>
              
              <FishingTrend></FishingTrend>
            </template>
          </SubtitledSection> -->
        </div>
        <div>
          <!-- <SubtitledSection title="作业海域">
            <template>
              <FishWork :fishworklist="fishworklist" @fishing-ground-click="handleFishingGroundClick"></FishWork>
            </template>
          </SubtitledSection> -->
        </div>
      </div>
    </div>
  </div>

</template>


<style lang="less" scoped>
.video-wrapper {
  pointer-events: auto;
  width: calc(100% - 2.6rem);
  height: calc(100% - 2.6rem);
  padding: 0.5rem 1.3rem 1.3rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-content {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

/deep/.amap-marker-label {
  border: 0;
  background-color: rgba(54, 74, 112, 0.4);
  padding: 10px;
  background-image: url('~@/assets/ui/position-text-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #FFFFFF;
  // line-height: 41px;
  text-stroke: 1px #000000;

  -webkit-text-stroke: 1px #000000;
}


//  地图设备提示框样式
.equip-box {
  position: absolute;
  top: 30%;
  left: 50%;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #F4ECC4;
  line-height: 28px;

  img {
    width: 22.2rem;
  }

  .text {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 1rem;
  }

  .close-icon {
    position: absolute;
    top: -2.5rem;
    right: 0rem;
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.3rem;
  }

  /*item框的高度*/
  .h-35 {
    height: 35%;
  }

  /*左下角设备描述字体*/

}

.header {
  width: 100%;
  height: 6rem;
}

.main {
  width: calc(100% - 2.7rem);
  height: calc(100% - 8.7rem);
  padding: 1.35rem;
  color: black;
  position: relative;
  pointer-events: none;

}

.home-sidebar {
  pointer-events: auto;
  height: 100%;
  width: 11.25%;
  position: relative;
  display: flex;
  align-items: center;
  // 左侧贴边
  padding-left: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 1;

  &.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }
}

.home-center {
  height: 100%;
  width: 55%;
  position: relative;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  pointer-events: none;
}

.info-box {
  margin-top: 1.6rem;
  height: 5%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.info-item {
  width: 12%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  // justify-content: flex-end;
  align-items: center;
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 41px;
}


.bottom-box {
  height: 32.6%;
  width: calc(100% - 1rem);
  margin-top: 1.5rem;
  position: absolute;
  display: flex;
  flex-direction: row;
  bottom: 0;

}

.box {
  background-image: url("~@/assets/ui/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 简易弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal-panel {
  width: 40%;
  max-width: 640px;
  background: rgba(1, 10, 20, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 12px;
  color: #BDDBF1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(67, 200, 255, 0.1);
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(67, 200, 255, 0.2);
  background: rgba(67, 200, 255, 0.05);
  border-radius: 12px 12px 0 0;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(67, 200, 255, 0.5);
  color: #FFFFFF;
}

.modal-close {
  font-size: 20px;
  transition: all 0.3s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  
  &:hover {
    background: rgba(67, 200, 255, 0.2);
    color: #FFFFFF;
    transform: rotate(90deg);
  }
}

.modal-body {
  padding: 1rem 1.2rem;
}

.modal-col {
  flex: 1;
}

.modal-col-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.modal-divider {
  width: 1px;
  background: rgba(67, 200, 255, 0.2);
  margin: 0 1rem;
}

.ship-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ship-item {
  padding: 0.6rem 0.2rem;
  border-bottom: 1px dashed rgba(67, 200, 255, 0.15);
}

.trace-records-dialog {
  background: rgba(1, 10, 20, 0.95);
  border: 1px solid rgba(67, 200, 255, 0.3);
}

.trace-records-container {
  max-height: 500px;
  overflow-y: auto;
}

.trace-record-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  color: #C3E4FF;
  font-size: 14px;
}

.trace-detail-dialog {
  background: rgba(1, 10, 20, 0.95);
  border: 1px solid rgba(67, 200, 255, 0.3);
}

.trace-detail-content {
  color: #C3E4FF;
}

.trace-temperature-chart-container {
  margin-bottom: 1rem;
}

.trace-temperature-chart {
  width: 100%;
  height: 260px;
}

.trace-temperature-chart-container .chart-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #C3E4FF;
}

.trace-detail-text .el-textarea__inner {
  background: rgba(12, 30, 60, 0.55);
  color: #C3E4FF;
  border-color: rgba(85, 150, 223, 0.4);
}

/* 图表类型下拉框样式 */
.chart-type-dropdown {
  position: fixed;
  /* top: 80px; left: 20px; - Removed fixed positioning */
  background: rgba(1, 10, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 8px;
  z-index: 2000;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(67, 200, 255, 0.1);
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

/* 作业海域统计下拉框样式 */
.fishing-area-dropdown {
  position: fixed;
  /* top: 80px; left: 200px; - Removed fixed positioning */
  background: rgba(1, 10, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 8px;
  z-index: 2000;
  min-width: 200px;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 15px rgba(67, 200, 255, 0.1);
  animation: fadeIn 0.3s ease;
  
  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(67, 200, 255, 0.3);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }
}

.dropdown-item {
  padding: 0.8rem 1.2rem;
  color: #C3E4FF;
  font-size: 15px;
  border-bottom: 1px solid rgba(67, 200, 255, 0.1);
  transition: all 0.2s ease;
  position: relative;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: linear-gradient(90deg, rgba(79, 191, 227, 0.1) 0%, rgba(79, 191, 227, 0.3) 100%);
    color: #FFFFFF;
    padding-left: 1.5rem;
    text-shadow: 0 0 5px rgba(67, 200, 255, 0.5);
  }
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #43C8FF;
    transform: scaleY(0);
    transition: transform 0.2s ease;
  }
  
  &:hover::before {
    transform: scaleY(1);
  }

  span {
    user-select: none;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 图表弹窗样式 */
.fishing-chart-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2001;
}

.fishing-chart-modal-panel {
  width: 90%;
  max-width: 1400px;
  height: 85vh;
  background: rgba(1, 10, 20, 0.9);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 12px;
  color: #BDDBF1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(67, 200, 255, 0.05);
  animation: zoomIn 0.3s ease;
}

.fishing-chart-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(67, 200, 255, 0.2);
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(67, 200, 255, 0.05) 0%, rgba(1, 10, 20, 0) 100%);
  border-radius: 12px 12px 0 0;
}

.fishing-chart-modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 0 10px rgba(67, 200, 255, 0.5);
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.fishing-chart-modal-close {
  font-size: 24px;
  color: #BDDBF1;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:hover {
    color: #FFFFFF;
    background: rgba(67, 200, 255, 0.2);
    border-radius: 4px;
  }
}

.fishing-chart-modal-body {
  flex: 1;
  padding: 1rem;
  overflow: hidden;
  min-height: 0;
}

/* 树状列表包装器 - 垂直居中，最小高度为屏幕一半 */
.tree-list-wrapper {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  min-height: 50vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  
  // 覆盖 SubtitledSection 的样式
  .w-100 {
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  // 覆盖 title-main 的 overflow 限制，允许内容撑开
  .title-main {
    overflow: visible !important;
    height: auto !important;
    flex-grow: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

/* 收起按钮 */
.list-collapse-btn {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(90deg, rgba(67, 200, 255, 0.8), rgba(44, 81, 153, 0.9));
  color: #FFFFFF;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  box-shadow: 0 4px 15px rgba(67, 200, 255, 0.3);
  border: 1px solid rgba(195, 228, 255, 0.3);

  &:hover {
    background: linear-gradient(90deg, rgba(67, 200, 255, 1), rgba(44, 81, 153, 1));
    box-shadow: 0 6px 20px rgba(67, 200, 255, 0.5);
    transform: translateX(-50%) translateY(-2px);
  }
  
  &:active {
    transform: translateX(-50%) translateY(0);
  }

  .collapse-icon {
    font-size: 14px;
    margin-right: 0.3rem;
  }

  .collapse-text {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
  }
}

/* 展开按钮（在左侧边缘正中）- 向右的三角形 */
.list-expand-btn {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateX(-100%) translateY(-50%); // 初始在屏幕外
  width: 24px;
  height: 60px;
  background: rgba(1, 10, 20, 0.8);
  border: 1px solid rgba(67, 200, 255, 0.5);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999 !important; // 确保在最上层
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  opacity: 0;

  &.visible {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }

  &::after {
    content: '';
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #43C8FF;
    margin-left: 2px;
  }

  &:hover {
    background: rgba(1, 10, 20, 0.95);
    width: 32px;
    box-shadow: 6px 0 20px rgba(67, 200, 255, 0.2);
    
    &::after {
      border-left-color: #FFFFFF;
    }
  }
}

/* 树状列表样式 - 参考图片设计 */
.tree-list-container {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.8rem 0.5rem;
  box-sizing: border-box;
  background: rgba(1, 10, 20, 0.9);
  border: 1px solid rgba(67, 200, 255, 0.3);
  border-radius: 8px;
  min-height: 300px; // 最小高度，确保初始显示为屏幕一半
  max-height: 70vh; // 最大高度，超过时内部滚动
  // 允许内容自动撑开
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.tree-node {
  margin-bottom: 0.1rem;
}

.tree-node-header {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.5rem;
  color: #C3E4FF;
  font-size: 14px;
  transition: all 0.2s ease;
  user-select: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background: rgba(67, 200, 255, 0.15);
    transform: translateX(2px);
  }
}

.company-node .tree-node-header {
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid rgba(67, 200, 255, 0.1);
  background: linear-gradient(90deg, rgba(67, 200, 255, 0.1) 0%, transparent 100%);
  margin-bottom: 0.2rem;
}

.ship-node .tree-node-header {
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  font-size: 14px;
  color: #C3E4FF;
}

/* 下拉箭头 */
.tree-node-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.5rem;
  font-size: 10px;
  color: #43C8FF;
  transition: transform 0.3s ease;
  transform-origin: center;
  flex-shrink: 0;
  cursor: pointer;

  &.expanded {
    transform: rotate(180deg);
  }
}

/* 红色小船图标 */
.ship-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 0.6rem;
  flex-shrink: 0;
  
  svg {
    width: 100%;
    height: 100%;
    fill: #FF4D4D;
    filter: drop-shadow(0 0 2px rgba(255, 0, 0, 0.5));
  }
}

.tree-node-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #C3E4FF;
}

.tree-node-count {
  color: #6C8CBC;
  font-size: 13px;
  margin-left: 0.5rem;
  font-weight: normal;
}

.tree-node-status {
  color: #43C8FF;
  font-size: 12px;
  margin-left: 0.5rem;
}

.tree-node-children {
  background: rgba(0, 0, 0, 0.2);
  margin: 0;
  padding: 0.2rem 0;
  border-left: none;
  border-radius: 0 0 4px 4px;
}

.tree-node-children.ship-list {
  background: rgba(0, 0, 0, 0.2);
  padding: 0;
}


/* 捕捞记录弹窗样式 */
.catch-records-dialog {
  background: rgba(1, 10, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  
  .el-dialog__header {
    border-bottom: 1px solid rgba(67, 200, 255, 0.2);
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(67, 200, 255, 0.05) 0%, rgba(1, 10, 20, 0) 100%);
    border-radius: 12px 12px 0 0;
  }
  
  .el-dialog__title {
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(67, 200, 255, 0.5);
  }
  
  .el-dialog__headerbtn .el-dialog__close {
    color: #BDDBF1;
    font-size: 20px;
    transition: all 0.3s ease;
  }
  
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: #FFFFFF;
    transform: rotate(90deg);
  }
  
  .el-dialog__body {
    padding: 1.5rem;
    color: #C3E4FF;
  }
  
  .el-dialog__footer {
    border-top: 1px solid rgba(67, 200, 255, 0.1);
    padding: 1rem 1.5rem;
    background: rgba(1, 10, 20, 0.3);
    border-radius: 0 0 12px 12px;
  }
}

.catch-records-container {
  max-height: 500px;
  overflow-y: auto;
}

/* 温度曲线弹窗样式 */
.temperature-chart-dialog {
  background: rgba(1, 10, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  
  .el-dialog__header {
    border-bottom: 1px solid rgba(67, 200, 255, 0.2);
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(67, 200, 255, 0.05) 0%, rgba(1, 10, 20, 0) 100%);
    border-radius: 12px 12px 0 0;
  }
  
  .el-dialog__title {
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(67, 200, 255, 0.5);
  }
  
  .el-dialog__body {
    padding: 1.5rem;
    color: #C3E4FF;
  }
}

.temperature-chart-content {
  color: #C3E4FF;
}

.trace-temperature-chart-container {
  margin-bottom: 1rem;
}

.trace-temperature-chart {
  width: 100%;
  height: 400px;
}

.trace-detail-text .el-textarea__inner {
  background: rgba(12, 30, 60, 0.55);
  color: #C3E4FF;
  border-color: rgba(85, 150, 223, 0.4);
  
  &:focus {
    border-color: #43C8FF;
    box-shadow: 0 0 5px rgba(67, 200, 255, 0.3);
  }
}

/* 捕捞日历弹窗样式 */
.catch-calendar-dialog {
  background: rgba(1, 10, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(67, 200, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  
  .el-dialog__header {
    border-bottom: 1px solid rgba(67, 200, 255, 0.2);
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(67, 200, 255, 0.05) 0%, rgba(1, 10, 20, 0) 100%);
    border-radius: 12px 12px 0 0;
  }
  
  .el-dialog__title {
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(67, 200, 255, 0.5);
  }
  
  .el-dialog__body {
    padding: 1.5rem;
    color: #C3E4FF;
  }
}

.catch-calendar-container {
  display: flex;
  gap: 1.5rem;
  color: #C3E4FF;
}

.catch-calendar-wrapper {
  flex: 0 0 500px;
}

.catch-calendar {
  background: rgba(10, 20, 40, 0.6);
  border: 1px solid rgba(85, 150, 223, 0.3);
  border-radius: 4px;
}

/* Element UI 日历样式覆盖 */
::v-deep .catch-calendar .el-calendar__header {
  background: rgba(44, 81, 153, 0.6);
  border-bottom: 1px solid rgba(85, 150, 223, 0.3);
  color: #C3E4FF;
  padding: 1rem;
}

::v-deep .catch-calendar .el-calendar__title {
  color: #C3E4FF;
  font-size: 16px;
  font-weight: 600;
}

::v-deep .catch-calendar .el-calendar__button-group {
  color: #C3E4FF;
}

::v-deep .catch-calendar .el-button {
  color: #C3E4FF;
  background: rgba(54, 74, 112, 0.3);
  border-color: rgba(108, 140, 188, 0.3);
}

::v-deep .catch-calendar .el-button:hover {
  background: rgba(54, 74, 112, 0.5);
  border-color: rgba(108, 140, 188, 0.6);
  color: #FFFFFF;
}

::v-deep .catch-calendar .el-calendar-table {
  background: rgba(10, 20, 40, 0.6);
}

::v-deep .catch-calendar .el-calendar-table thead th {
  background: rgba(44, 81, 153, 0.4);
  color: #C3E4FF;
  border-color: rgba(85, 150, 223, 0.3);
  padding: 0.8rem 0;
  font-weight: 600;
}

::v-deep .catch-calendar .el-calendar-table td {
  border-color: rgba(85, 150, 223, 0.2);
  padding: 0.3rem;
}

::v-deep .catch-calendar .el-calendar-day {
  background: rgba(10, 20, 40, 0.4);
  color: #C3E4FF;
  height: 60px;
  padding: 0;
  position: relative;
}

::v-deep .catch-calendar .el-calendar-day:hover {
  background: rgba(54, 74, 112, 0.5);
}

.calendar-day-cell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.calendar-day-cell.has-catch {
  background: rgba(92, 160, 177, 0.3);
  border: 1px solid rgba(92, 160, 177, 0.5);
}

.calendar-day-cell.selected {
  background: rgba(67, 200, 255, 0.5);
  border: 2px solid #43C8FF;
  box-shadow: 0 0 8px rgba(67, 200, 255, 0.5);
}

.calendar-day-cell.has-catch.selected {
  background: rgba(67, 200, 255, 0.6);
  border: 2px solid #43C8FF;
}

.calendar-day-number {
  font-size: 14px;
  font-weight: 500;
  color: #C3E4FF;
  margin-bottom: 2px;
}

.calendar-day-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #5CA0B1;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
}

.calendar-day-cell.selected .calendar-day-badge {
  background: #43C8FF;
}

.catch-records-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catch-records-header {
  padding: 1rem;
  background: rgba(44, 81, 153, 0.4);
  border-bottom: 1px solid rgba(85, 150, 223, 0.3);
  margin-bottom: 1rem;
  border-radius: 4px;
}

.catch-records-header h3 {
  margin: 0;
  color: #C3E4FF;
  font-size: 18px;
  font-weight: 600;
}

.catch-records-header .record-count {
  color: #5CA0B1;
  font-size: 14px;
  font-weight: 400;
  margin-left: 0.5rem;
}

.catch-records-header .no-date-selected {
  color: #6C8CBC;
  font-size: 16px;
  font-weight: 400;
}

.catch-records-content {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.no-records {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #6C8CBC;
  font-size: 14px;
}

.no-records p {
  margin: 0;
}
</style>